<template>
  <div>
    <h3>$nextTick</h3>
   <p ref="myP">{{count}}</p> 
   <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 100
    }
  },
  methods: {
    // 修改数据,数据变化了 => 视图会自动更新
    // 问题: dom更新不及时
    // vue更新dom是异步更新dom的  => vue不会在数据修改之后立刻更新dom
    // vue会等当前的主线程代码执行完成,  统一更新 => 提升性能
    add() {
      this.count++
      
      // 可以利用setTimeout来拿到最新的dom
      // setTimeout(() => {
      //   console.log(this.$refs.myP.innerHTML, 2)
      // }, 0)
      console.log(this.$refs.myP.innerHTML, 1)
      // vue中提供了一个语法 $nextTick(() => {能够获取到更新后的dom})
      this.$nextTick(() => {
        console.log(this.$refs.myP.innerHTML, 2)
      })
    }
  }
}
</script>

<style>

</style>